<!--
 * @Descripttion: 帖子组件
 * @version: 
 * @@Company: None
 * @Author: 孤鹜
 * @Date: 2022-02-18 09:58:20
 * @LastEditors: 孤鹜
 * @LastEditTime: 2022-03-05 11:04:09
-->
<template>
  <div class="posts_container">
    <!-- 帖子简要内容 -->
    <main class="post_info" @click="pushToDetail">
      <header class="post_title">
        <div class="postName">标题：{{ postTitle }}</div>
        <div class="postTag" v-if="postTag">{{ "#" + postTag }}</div>
        <div class="postLocation" v-if="postLocation">{{ postLocation + "吧" }}</div>
      </header>
      <main class="post_msg">
        正文内容：{{ postMsg }}
        <div v-if="postImg">
          <div class="IMG" v-for="(x, index) in postImg" :key="index">
            <img :src="x" />
          </div>
        </div>
      </main>

      <footer class="post_user">发帖人：{{ postMan }}</footer>
    </main>
    <!-- 帖子处理按钮 -->
    <!-- 当为用户反馈时不显示按钮 -->
    <aside class="process_btn" v-if="!postbtn">
      <!-- 当未审核状态时，可通过或删除 -->
      <main v-if="isNoApproved == 0">
        <el-button type="info" @click="approveStatus">通 过</el-button>
        <el-button type="danger" @click="failedStatus">删 除</el-button>
      </main>
      <!-- 已审核或已删除状态时，可恢复为未审核 -->
      <main v-else>
        <el-button type="info" @click="resetStatus">恢 复</el-button>
      </main>
    </aside>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "postItem",
  props: [
    "postTitle",
    "postMsg",
    "postMan",
    "postId",
    "isNoApproved",
    "postTag",
    "postLocation",
    "postImg",
    "isTopic",
    "postbtn",
  ],
  methods: {
    // 触发父组件刷新
    flashFather() {
      this.$emit("flashFather");
    },
    // 更新状态为已通过
    approveStatus() {
      // 更新帖子状态
      if (this.isTopic === 0) {
        axios({
          method: "post",
          url: "updatePostStatus",
          data: {
            id: this.postId,
            status: 1,
          },
        }).then((res) => {
          // 刷新审核区域数据
          this.flashFather(0);
        });
      } 
      // 更新博客文章状态
      else {
        axios({
          method: "post",
          url: "updateBlogStatus",
          data: {
            id: this.postId,
            status: 1,
          },
        }).then((res, res1) => {
          // 刷新数据
          this.flashFather(0);
        });
      }
    },
    // 更新状态为已删除
    failedStatus() {
      // 更新帖子状态
      if (this.isTopic === 0) {
        axios({
          method: "post",
          url: "updatePostStatus",
          data: {
            id: this.postId,
            status: -1,
          },
        }).then((res) => {
          // 刷新审核区域数据
          this.flashFather();
        });
      } 
      // 更新博客文章状态
      else {
        axios({
          method: "post",
          url: "updateBlogStatus",
          data: {
            id: this.postId,
            status: -1,
          },
        }).then((res, res1) => {
          // 刷新审核区域数据
          this.flashFather();
        });
      }
    },
    // 更新状态为未审核
    resetStatus() {
      // 更新帖子状态
      if (this.isTopic === 0) {
        axios({
          method: "post",
          url: "updatePostStatus",
          data: {
            id: this.postId,
            status: 0,
          },
        }).then((res) => {
          // 刷新审核区域数据
          this.flashFather();
        });
      } 
      // 更新博客文章状态
      else {
        axios({
          method: "post",
          url: "updateBlogStatus",
          data: {
            id: this.postId,
            status: 0,
          },
        }).then((res, res1) => {
          // 刷新审核区域数据
          this.flashFather();
        });
      }
    },
    // 进入详情页
    pushToDetail() {
      this.$router.push({
        path: "/detail",
        query: {
          id: this.postId,
          isClass: this.isTopic,
          isApproved: this.isNoApproved,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
@text_color: #fff;

.flex_box(@layout: row, @align: center) {
  display: flex;
  flex-flow: @layout nowrap;
  justify-content: flex-start;
  align-items: @align;
}
.size {
  height: 100%;
  width: 100%;
}
.inner_box {
  box-sizing: border-box;
  padding: 0 20px 0px 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  text-align: left;
}

.posts_container {
  .flex_box(row);
  width: 100%;
  height: 200px;
  border-radius: 4px;
  margin-bottom: 20px;

  background-color: rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  padding: 10px 25px;

  main {
    .flex_box(column, flex-start);
  }

  .post_info {
    color: @text_color;
    flex: 1 1 80%;
    box-sizing: border-box;
    cursor: pointer;
    // padding-right: 20px;

    .size();
    width: 80%;
    .post_title {
      flex: 0 0 28%;
      .inner_box();
      .flex_box();
      width: 100%;

      .postName {
        font-size: 24px;
        flex: 0 0 600px;
        .inner_box();

        &:hover,
        .postName:focus {
          color: #ffd04b;
        }
      }

      .postTag {
        background-color: #ecf5ff;
        color: #4ea5ff;
        border: 1px solid #cfe6ff;
        border-radius: 12px;
        padding: 5px 12px;
        margin-right: 20px;
        box-sizing: border-box;

        max-width: 130px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        word-break: break-all;
      }
      .postLocation {
        background-color: #fdf6ec;
        color: #e7a645;
        border: 1px solid #fbf1e1;
        border-radius: 12px;
        padding: 5px 9px;

        max-width: 130px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        word-break: break-all;
      }
    }
    .post_msg {
      font-size: 16px;
      flex: 0 0 53%;
      .inner_box();
      white-space: normal;
      color: #eee;
      .IMG {
        display: inline-block;
        width: 50px;
        height: 50px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .post_user {
      flex: 0 0 15%;
      .inner_box();
      padding-top: 5px;
      color: #ddd;
    }
  }

  .process_btn {
    flex: 0 0 20%;
    color: #aaa;
    height: 100%;

    main {
      height: 100%;
      justify-content: space-around;
    }

    /deep/ .el-button {
      width: 100%;
      margin: 0;
      margin-bottom: 5px;
    }
  }
}
</style>
